.view {
  $gutter: $view-controller-gutter;
  $base-height: $button-base-height;

  overflow: hidden;
  height: 100%;
  padding: $gutter;

  &-inner {
    overflow: auto;
    height: 100%;
    border-radius: 2px;
    background: $color-white;
  }

  // View Banner Styles
  &__banner {
    min-height: 56px;
    padding: 12px $gutter;
    background: $color-white;
    box-shadow: inset 0 -1px 0 $color-border-default;

    &-title {
      font-size: 16px;
      font-weight: normal;
      line-height: $base-height;
      float: left;
      color: $color-text-mine-shaft;
    }

    .ant-breadcrumb {
      line-height: $base-height;
    }
  }

  &__query{
    padding: 0px;
  }

  // View Controller Styles
  &__controller {
    height: $base-height + ($gutter * 2); // 64px
    padding: $gutter;
  }

  // View Content Styles
  &__content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    //padding: $gutter;
    &--table {
        padding: $gutter;
    }

    &--l {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      height: calc(100% - 56px);
    }

    &--m {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      height: calc(100% - #{56px + 64px});
    }

    &--s {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      height: calc(100% - #{56px + 64px + 64px});
    }

    &--xs {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      height: calc(100% - #{56px + 64px + 64px + 120px});
    }
    &>div>.clearfix{
      border:1px solid $color-border-default ;
      overflow: hidden;
      & .ant-table{
        margin-left:-1px;
        margin-top:-1px;
      }
    }
  }

  // View Pagination Styles
  &__pagination {
    line-height: $base-height; // 64px
    margin-top: $gutter;

    > .ant-pagination {
      position: relative;
    }

    > .select-info{
      line-height: $base-height; // 64px
      padding-right: 10px;
    }
  }


  // Reset ant elements' margin
  .right {
    > .ant-select,
    > .ant-input,
    > .ant-btn,
    > .bui-link-btn {
      margin-left: $view-controller-gutter;
    }
  }

  .left {
    > .ant-select,
    > .ant-input,
    > .ant-btn,
    > .bui-link-btn {
      margin-right: $view-controller-gutter;
    }
  }
}


// view-section
.view-section {
  padding: $view-controller-gutter;

  &__title {
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
    margin-bottom: 1em;
    padding-bottom: 10px;
    color: $color-text-default;
    border-bottom: 1px dashed $color-border-default;

    &::before {
      float: left;
      width: 3px;
      height: 1em;
      margin-right: 7px;
      content: '';
      background: $color-dodger-blue;
    }
  }
}

//bread
.view-bread{
  display: block;
  font-size: 14px;
  padding: 0px;
  margin:0px;
  line-height: $button-base-height;

  &-item{
    display: inline-block;
    color:#999;
    
    &.item-last{
      color:#222;
    }

  }
  .item-separator{
    color: #d9d9d9;
    display: inline-block;
    padding: 0px 8px;
  }
}

.view-step-bar{
  padding: 16px;
}

.anticon{
  font-size: 16px;
  color: $color-text-malibu;
  &:hover{
    color: $color-background-malibu;
  }
}
.anticon.ant-danger{
    color: $color-ecstasy;
  &:hover{
    color: $color-persimmon;
  }
}

